<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>资源房源探索平台</title>
    <link rel="stylesheet" href="../static/plugins/bootstrap-3.4.1/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../static/css/style.css">

    <style>
        .black1 {
            background-color: #1a1a1d;
        }

        .black2 {
            background-color: #4e4e50;
        }

        .red1 {
            background-color: #6f2232;
        }

        .red2 {
            background-color: #950740;
        }

        .red3 {
            background-color: #c3073f;
        }

        #chart1 {
        {#width: 600px;#}{#height: 510px;#} width: 100%;
            height: 100%;
            margin: 0 auto; /* 水平居中 */
            display: flex; /* 使用 Flexbox */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            border: 1px solid #ccc; /* 可选，为容器添加边框 */
        }

        #chart5 {
            width: 100%;
            height: 100%;
        {#width: 600px;#}{#height: 550px;#}
        }

        #main {
            width: 100%;
            height: 100%;
        {#height: 1000px;#}{#width: 600px;#}
        }

        #chart2 {
            width: 100%;
            height: 100%;
        {#width: 600px;#}{#height: 420px;#}
        }

        #chart4 {
            width: 100%;
            height: 100%;
        {#width: 600px;#}{#height: 320px;#} margin: 0 auto; /* 水平居中 */
            display: flex; /* 使用 Flexbox */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            border: 1px solid #ccc; /* 可选，为容器添加边框 */
        }

        .col-buju {
            padding-right: 6px;
            padding-left: 6px;

        }


    </style>


</head>

{% load static %}

<body background="{% static 'img/p2.png' %}">


{#style="opacity: 0.85"#}

<div class="clearfix red1" style="height: 1180px;">
    <nav class="navbar black1" style="margin-bottom: 0">
        <div class="container-fluid">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                        data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
{#                <a class="navbar-brand container-fluid" href="https://www.nwnu.edu.cn/" style="padding-top: 5px;">#}
                <a class="navbar-brand container-fluid" href="https://www.bilibili.com/video/BV1kw4m1Z7Qh/?spm_id_from=333.337.search-card.all.click" style="padding-top: 5px;">
                    {#                    <img alt="Brand" src="{% static 'img/nwnu_logo_1.png' %}" style="width: 40px; height: 40px;">#}
                    <img alt="Brand" src="{% static 'img/mzd.jpg' %}" style="width: 45px; height: 45px;">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav">
                    <li class="active "><a href="#"><span
                            style="margin-top: 15px;font-size: 25px; "><span
                            class="dance_font">智慧房源平台</span></span> <span
                            class="sr-only">(current)</span></a></li>
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>
                </ul>
                <form class="navbar-form navbar-left">
                    <div class="form-group">
                        <input type="text" class="form-control" placeholder="Search">
                    </div>
                    <button type="submit" class="btn btn-default">Submit</button>
                </form>
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">Link</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
                           aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>


    <div class="col-xs-4 col-buju" style="height: 1180px; margin-top: 17px;">
        <div class="box" style="height: 10px">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
        </div>

        <a class="row-buju" href="/sdfy/?province=山东省">

            <div class="panel panel-primary">
                <div class="panel-heading text-center" style="background-color: #950740; opacity: 0.85">
                    <span class="panel-title" style="font-size: 20px">
                        山东省各城市房价均值
                    </span>
                </div>
                <div class="panel-body mainbox " style="height: 340px;width: 100%;opacity: 0.85">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <div id="chart1"></div>
                </div>
            </div>
        </a>

        <div class="row-buju" style="background-color: #1a1a1d;">
            <div class="panel panel-primary" style="height: 480px">
                <div class="panel-heading" style="background-color: #950740">
                    <h1 class="panel-title text-center" style="font-size: 20px;">
                        <a href="/chart2/" style="text-decoration: none">全国各城市房源数量</a>
                    </h1>
                </div>
                <div class="panel-body mainbox" style="height: 430px">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <div id="chart2">

                    </div>
                </div>
            </div>
        </div>

    </div>

    {#   中间大地图 #}
    <div class="col-xs-4 col-buju red1">
        <div class="panel panel-primary">
            <div class="panel-heading " style="background-color: #c3073f">
                <span class="panel-title  dance_font center-block" style="font-size: 27px;text-align: center">
                    <a href="/chart3/" style="text-decoration: none">
                        中国各省房源数量
                    </a>

                </span>
            </div>
            <div class="panel-body quanguo mainbox" style="height: 868px">
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
                <span class="line"></span>
                <div id="main"></div>
            </div>
        </div>
    </div>

    <div class="col-xs-4 col-buju red1" style=" margin-top: 17px">
        <div class="row-buju">
            <div class="box" style="height: 10px">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                <span></span>
            </div>
            <div class="panel panel-primary">
                <div class="panel-heading text-center" style="background-color: #950740">
                    <h3 class="panel-title" style="font-size: 20px">
                        <a href="/chart4/" style="text-decoration: none">山东省挂牌时间房源数量</a>
                    </h3>
                </div>
                <div class="panel-body mainbox" style="height: 340px">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <div id="chart4"></div>
                </div>
            </div>
        </div>

        <div class="row-buju" style="background-color: #1a1a1d">
            <div class="panel panel-primary" style="height: 490px">
                <div class="panel-heading text-center" style="background-color: #950740">
                    <h3 class="panel-title" style="font-size: 20px">
                        <a href="/chart5/" style="text-decoration: none">
                            房价影响因素
                        </a>
                    </h3>
                </div>
                <div class="panel-body mainbox " style="height: 440px;">
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <span class="line"></span>
                    <div id="chart5"></div>
                </div>
            </div>
        </div>
    </div>


</div>


<script src="../static/js/jquery-3.7.1.js"></script>
<script src="../static/plugins/bootstrap-3.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.1/echarts.min.js"></script>

<script type="text/javascript">
    {#chart1 #}
    {
        // 正常节点的获取
        let chartdom = document.getElementById('chart1');
        // 转化为echarts的对象节点
        let myChart = echarts.init(chartdom); // 确保这里使用了正确的变量名
        // 数据的配置


        //柱状图
        let option = {
            tooltip: {
                trigger: 'item', // 触发类型：数据项触发
                formatter: '{a} <br/>{b} : {c}' // 显示内容
            },
            xAxis: {
                type: 'category',
                data: ['临沂市', '威海市', '泰安市', '济南市', '济宁市', '淄博市', '潍坊市', '烟台市', '菏泽市', '青岛市']
                {#data:{{ city_list }}#}
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '平均房价',
                    type: 'bar',
                    data: [8860, 8810, 11290, 16400, 9400, 8400, 8310, 9640, 5460, 21260],
                    {#data: {{ city_price }},#}
                    itemStyle: {
                        color: '#ADD8E6', // 柱状图平常显示颜色为浅蓝色
                        emphasis: {
                            color: '#00ffff' // 鼠标放上去以后颜色加深为深蓝色
                        }
                    }
                }
            ]
        };
        // ajax获取数据
        $.ajax({
            url: '/city/avg/',
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {
                // 将后台返回的数据更新到图表中
                option.xAxis.data = res.data.city_list;
                option.series.date = res.data.avg;

                myChart.setOption(option);
            }
        })
    }
    {#chart5#}
    {
        // 引入 echarts 库
        let chartDom = document.getElementById('chart5');
        let myChart = echarts.init(chartDom);
        let option;

        const data = [
            {value: 800, name: '地区'},
            {value: 735, name: '建筑面积'},
            {value: 680, name: '房屋户型'},
            {value: 584, name: '装修情况'},
            {value: 490, name: '所在楼层'},
            {value: 430, name: '梯户比例'},
            {value: 300, name: '房屋朝向'},
            {value: 260, name: '户型结构'},
            {value: 200, name: '抵押信息'},
            {value: 150, name: '建筑结构'}
        ];

        option = {
            {#legend: {#}
            {#    top: 'bottom'#}
            {# },#}
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                    dataView: {show: true, readOnly: false},
                    restore: {show: true},
                    saveAsImage: {show: true}
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [30, 200],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: data
                }
            ]
        };
        // 动态设置图表尺寸
        myChart.resize({
            {#width: 600,#}
            height: 400
        });
        option && myChart.setOption(option);
    }

    {# chart3 #}
    {
        let scatterData = [
            {#{#}
            {#    value:[106.60,39.86]#}
            {# } ,#}
            {#{#}
            {#    value:[116.00,33.86]#}
            {# } ,#}
            {#{#}
            {#    value:[106.60,36.86]#}
            {# } ,#}
            {#{#}
            {#    value:[116.00,33.86]#}
            {# }, #}
        ]


        let myChart = echarts.init(document.getElementById('main'));
        // 显示加载动画
        myChart.showLoading();

        // 中国各省的数据
        let chinaData = [
            ["省份", "房源总数", "二手房数量"],
            ["北京市", 50000, 15000],
            ["上海市", 60000, 20000],
            ["广东省", 70000, 30000],
            ["江苏省", 55000, 18000],
            ["浙江省", 65000, 22000],
            ["河北省", 40000, 12000],
            ["河南省", 45000, 13000],
            ["山东省", 60000, 25000],
            ["辽宁省", 35000, 10000],
            ["吉林省", 30000, 9000],
            ["黑龙江省", 32000, 9500],
            ["内蒙古自治区", 38000, 11000],
            ["陕西省", 42000, 14000],
            ["甘肃省", 39000, 11000],
            ["安徽省", 39000, 11000],
            ["江西省", 39000, 11000],
            ["福建省", 39000, 11000],
            ["宁夏回族自治区", 39000, 11000],
            ["山西省", 37000, 12500],
            ["重庆市", 39000, 11000],
            ["湖北省", 50000, 17000],
            ["湖南省", 48000, 16000],
            ["四川省", 55000, 19000],
            ["重庆省", 46000, 15000],
            ["贵州省", 29000, 8500],
            ["云南省", 31000, 9000],
            ["西藏自治区", 15000, 4000],
            ["青海省", 22000, 6500],
            ["新疆维吾尔自治区", 25000, 7000],
            ["广西壮族自治区", 33000, 10000],
            ["海南省", 20000, 6000],
            ["天津市", 40000, 13000],
            ["香港特别行政区", 25000, 8000],
            ["澳门特别行政区", 15000, 4000],
            ["台湾省", 28000, 9000]
        ];


        // 解析数据并转换为适用于ECharts的数据格式
        function parseData(jsonData) {
            let data = [];
            for (let i = 1; i < jsonData.length; i++) {
                let row = jsonData[i];
                if (row && row.length >= 3) {
                    data.push({
                        name: row[0],   // 地区名称
                        value: row[1],  // 房源总数
                        secondHandHouse: row[2]  // 二手房数量
                    });
                }
            }
            return data;
        }

        // 初始化中国地图
        function initChinaMap(data) {
            myChart.hideLoading();

            // 使用中国地图数据 URL
            fetch('https://geo.datav.aliyun.com/areas_v3/bound/100000_full.json')
                .then(response => response.json())
                .then(geoJson => {
                    echarts.registerMap('china', geoJson);

                    myChart.setOption({
                        title: {
                            text: '',
                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item',
                            formatter: function (params) {
                                var secondHandHouse = params.data && params.data.secondHandHouse != null ? params.data.secondHandHouse : '未知';
                                var totalValue = params.data && params.data.value != null ? params.data.value : '未知';
                                return params.name + '<br/>' +
                                    '房源总数: ' + totalValue + '<br/>' +
                                    '二手房数量: ' + secondHandHouse;
                            }
                        },
                        visualMap: {
                            min: 0,
                            max: 70000,
                            left: 'left',
                            top: 'bottom',
                            text: ['高', '低'],
                            inRange: {
                                color: ['#e0f7fa', '#006064']
                            },
                            calculable: true
                        },
                        geo: {
                            type: "map",
                            map: "china",
                            roam: true,
                            label: {
                                show: true
                            },
                            {#data:data#}
                        },
                        series: [
                            {
                                data: scatterData,
                                type: 'effectScatter',
                                coordinateSystem: 'geo',
                                rippleEffect: {
                                    scale: 10
                                },
                            },
                            {
                                data: data,
                                geoIndex: 0,
                                type: 'map',
                                map: 'china',
                                roam: true,
                                label: {
                                    show: true
                                },
                                itemStyle: {
                                    normal: {
                                        areaColor: '#323c48',
                                        borderColor: '#111'
                                    },
                                    emphasis: {
                                        areaColor: '#2a333d'
                                    }
                                }
                            }
                        ]
                    });

                    // 点击事件，进入山东省地图
                    myChart.on('click', function (params) {
                        location.href = "/sdfy/?province=" + params.name;
                    });
                })
                .catch(error => {
                    console.error('Error fetching or processing the map data:', error);
                });
        }

        // 解析数据并初始化中国地图
        var parsedChinaData = parseData(chinaData);
        initChinaMap(parsedChinaData);
    }

    {# chart4 #}
    {
        {#折线图#}
        let chartDom = document.getElementById('chart4');
        let myChart4 = echarts.init(chartDom, 'light');
        let option;


        $.ajax({
            url: '/city/guapai/',
            type: 'GET',
            dataType: 'JSON',
            success: function (res) {

                option = {
                    title: {
                        text: ''
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        {#data: ['2016年', '2017年', '2018年', '2019年', '2020年', '2021年', '2022年', '2023年', '2024年']#}
                        data: res.data.year_list
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            {#data: [0, 103, 311, 2110, 9874, 15530, 34621, 47698, 65452],#}
                            data: res.data.cnt_list,
                            type: 'line',
                            lineStyle: {
                                color: '#48d1cc', // 线条的颜色
                                width: 3, // 线条的宽度
                            },
                            areaStyle: {},
                            itemStyle: {
                                normal: {
                                    color: '#ADD8E6', // 正常状态下的点颜色
                                    symbol: 'circle', // 数据点的形状
                                    symbolSize: 8 // 数据点的大小
                                },
                                emphasis: {
                                    color: '#bf0d28' // 鼠标悬停时的颜色
                                }
                            }
                        }
                    ]
                };

                // 为每个数据点添加标记点
                option.series[0].markPoint = {
                    symbol: 'circle', // 标记点的形状
                    symbolSize: 15, // 标记点的大小
                    itemStyle: {
                        color: '#29c18d' // 标记点的颜色
                    },
                    data: option.xAxis.data.map(function (item, index) {
                        return {
                            coord: [index, option.series[0].data[index]], // 标记点的坐标（年份索引, 值）
                            name: item // 标记点的名称
                        };
                    })
                };
                myChart4.setOption(option);
            }
        })


    }

    {# chart2   全国各城市#}
    {
        let chartDom2 = document.getElementById('chart2');
        let myChart2 = echarts.init(chartDom2, 'white');

        myChart2.showLoading();

        const diskData = [
            {
                "children": [
                    {
                        "name": "湖北省",
                        "children": [
                            {"name": "武汉市", "value": 1200000},
                            {"name": "黄石市", "value": 750000},
                            {"name": "十堰市", "value": 680000},
                            {"name": "宜昌市", "value": 800000},
                            {"name": "襄阳市", "value": 900000},
                            {"name": "鄂州市", "value": 500000},
                            {"name": "荆门市", "value": 600000},
                            {"name": "孝感市", "value": 650000},
                            {"name": "荆州市", "value": 700000},
                            {"name": "黄冈市", "value": 720000}
                        ]
                    },
                    {
                        "name": "广东省",
                        "children": [
                            {"name": "广州市", "value": 14000000},
                            {"name": "深圳市", "value": 13000000},
                            {"name": "珠海市", "value": 2000000},
                            {"name": "汕头市", "value": 1800000},
                            {"name": "佛山市", "value": 7600000},
                            {"name": "韶关市", "value": 3000000},
                            {"name": "湛江市", "value": 2300000},
                            {"name": "肇庆市", "value": 2100000},
                            {"name": "江门市", "value": 2200000},
                            {"name": "茂名市", "value": 2400000}
                        ]
                    },
                    {
                        "name": "江苏省",
                        "children": [
                            {"name": "南京市", "value": 8400000},
                            {"name": "无锡市", "value": 6500000},
                            {"name": "徐州市", "value": 6100000},
                            {"name": "常州市", "value": 5400000},
                            {"name": "苏州市", "value": 10700000},
                            {"name": "南通市", "value": 7300000},
                            {"name": "连云港市", "value": 4800000},
                            {"name": "淮安市", "value": 4600000},
                            {"name": "盐城市", "value": 5100000},
                            {"name": "扬州市", "value": 4500000}
                        ]
                    },
                    {
                        "name": "山东省",
                        "children": [
                            {"name": "济南市", "value": 7200000},
                            {"name": "青岛市", "value": 9300000},
                            {"name": "淄博市", "value": 4700000},
                            {"name": "枣庄市", "value": 3900000},
                            {"name": "东营市", "value": 2100000},
                            {"name": "烟台市", "value": 7000000},
                            {"name": "潍坊市", "value": 9300000},
                            {"name": "济宁市", "value": 8300000},
                            {"name": "泰安市", "value": 5500000},
                            {"name": "威海市", "value": 2800000}
                        ]
                    },
                    {
                        "name": "四川省",
                        "children": [
                            {"name": "成都市", "value": 16000000},
                            {"name": "绵阳市", "value": 5400000},
                            {"name": "自贡市", "value": 3300000},
                            {"name": "攀枝花市", "value": 4200000},
                            {"name": "泸州市", "value": 3500000},
                            {"name": "德阳市", "value": 3800000},
                            {"name": "广元市", "value": 3100000},
                            {"name": "遂宁市", "value": 3200000},
                            {"name": "内江市", "value": 3000000},
                            {"name": "乐山市", "value": 3600000}
                        ]
                    },
                    {
                        "name": "河南省",
                        "children": [
                            {"name": "郑州市", "value": 10000000},
                            {"name": "开封市", "value": 4800000},
                            {"name": "洛阳市", "value": 7100000},
                            {"name": "平顶山市", "value": 5000000},
                            {"name": "安阳市", "value": 5300000},
                            {"name": "鹤壁市", "value": 2900000},
                            {"name": "新乡市", "value": 6200000},
                            {"name": "焦作市", "value": 3700000},
                            {"name": "濮阳市", "value": 3600000},
                            {"name": "许昌市", "value": 4500000}
                        ]
                    },
                    {
                        "name": "浙江省",
                        "children": [
                            {"name": "杭州市", "value": 10000000},
                            {"name": "宁波市", "value": 8000000},
                            {"name": "温州市", "value": 9000000},
                            {"name": "嘉兴市", "value": 4700000},
                            {"name": "湖州市", "value": 3000000},
                            {"name": "绍兴市", "value": 5000000},
                            {"name": "金华市", "value": 5800000},
                            {"name": "衢州市", "value": 2500000},
                            {"name": "舟山市", "value": 1100000},
                            {"name": "台州市", "value": 6200000}
                        ]
                    },
                    {
                        "name": "湖南省",
                        "children": [
                            {"name": "长沙市", "value": 8000000},
                            {"name": "株洲市", "value": 4000000},
                            {"name": "湘潭市", "value": 2800000},
                            {"name": "衡阳市", "value": 7300000},
                            {"name": "邵阳市", "value": 6300000},
                            {"name": "岳阳市", "value": 5600000},
                            {"name": "常德市", "value": 6000000},
                            {"name": "张家界市", "value": 1500000},
                            {"name": "益阳市", "value": 3800000},
                            {"name": "郴州市", "value": 4700000}
                        ]
                    },
                    {
                        "name": "陕西省",
                        "children": [
                            {"name": "西安市", "value": 12000000},
                            {"name": "宝鸡市", "value": 3700000},
                            {"name": "咸阳市", "value": 5300000},
                            {"name": "渭南市", "value": 5600000},
                            {"name": "铜川市", "value": 2800000},
                            {"name": "延安市", "value": 2200000},
                            {"name": "榆林市", "value": 3800000},
                            {"name": "汉中市", "value": 3400000},
                            {"name": "安康市", "value": 3000000},
                            {"name": "商洛市", "value": 2400000}
                        ]
                    },
                    {
                        "name": "福建省",
                        "children": [
                            {"name": "福州市", "value": 7300000},
                            {"name": "厦门市", "value": 4200000},
                            {"name": "莆田市", "value": 2900000},
                            {"name": "三明市", "value": 2500000},
                            {"name": "泉州市", "value": 8500000},
                            {"name": "漳州市", "value": 5000000},
                            {"name": "南平市", "value": 2600000},
                            {"name": "龙岩市", "value": 2800000},
                            {"name": "宁德市", "value": 3100000},
                            {"name": "平潭综合实验区", "value": 50000}
                        ]
                    },
                    {
                        "name": "河北省",
                        "children": [
                            {"name": "石家庄市", "value": 10500000},
                            {"name": "唐山市", "value": 7600000},
                            {"name": "秦皇岛市", "value": 3100000},
                            {"name": "邯郸市", "value": 9400000},
                            {"name": "邢台市", "value": 7300000},
                            {"name": "保定市", "value": 9500000},
                            {"name": "张家口市", "value": 4400000},
                            {"name": "承德市", "value": 3600000},
                            {"name": "沧州市", "value": 7400000},
                            {"name": "廊坊市", "value": 4700000}
                        ]
                    },
                    {
                        "name": "辽宁省",
                        "children": [
                            {"name": "沈阳市", "value": 8300000},
                            {"name": "大连市", "value": 6900000},
                            {"name": "鞍山市", "value": 3500000},
                            {"name": "抚顺市", "value": 2100000},
                            {"name": "本溪市", "value": 1600000},
                            {"name": "丹东市", "value": 2400000},
                            {"name": "锦州市", "value": 3000000},
                            {"name": "营口市", "value": 2300000},
                            {"name": "阜新市", "value": 1800000},
                            {"name": "辽阳市", "value": 1700000}
                        ]
                    },
                    {
                        "name": "广西壮族自治区",
                        "children": [
                            {"name": "南宁市", "value": 7100000},
                            {"name": "柳州市", "value": 4000000},
                            {"name": "桂林市", "value": 5300000},
                            {"name": "梧州市", "value": 3300000},
                            {"name": "北海市", "value": 1500000},
                            {"name": "防城港市", "value": 1000000},
                            {"name": "钦州市", "value": 3200000},
                            {"name": "贵港市", "value": 4500000},
                            {"name": "玉林市", "value": 6800000},
                            {"name": "百色市", "value": 3900000}
                        ]
                    },
                    {
                        "name": "云南省",
                        "children": [
                            {"name": "昆明市", "value": 6800000},
                            {"name": "曲靖市", "value": 6000000},
                            {"name": "玉溪市", "value": 2300000},
                            {"name": "保山市", "value": 2500000},
                            {"name": "昭通市", "value": 5000000},
                            {"name": "丽江市", "value": 1300000},
                            {"name": "普洱市", "value": 2400000},
                            {"name": "临沧市", "value": 2200000},
                            {"name": "楚雄彝族自治州", "value": 2700000},
                            {"name": "红河哈尼族彝族自治州", "value": 4700000}
                        ]
                    },
                    {
                        "name": "甘肃省",
                        "children": [
                            {"name": "兰州市", "value": 3800000},
                            {"name": "嘉峪关市", "value": 250000},
                            {"name": "金昌市", "value": 1800000},
                            {"name": "白银市", "value": 1700000},
                            {"name": "天水市", "value": 3300000},
                            {"name": "武威市", "value": 1800000},
                            {"name": "张掖市", "value": 1200000},
                            {"name": "平凉市", "value": 2100000},
                            {"name": "酒泉市", "value": 1100000},
                            {"name": "庆阳市", "value": 2200000}
                        ]
                    },
                    {
                        "name": "贵州省",
                        "children": [
                            {"name": "贵阳市", "value": 4600000},
                            {"name": "六盘水市", "value": 2900000},
                            {"name": "遵义市", "value": 6200000},
                            {"name": "安顺市", "value": 2300000},
                            {"name": "毕节市", "value": 6500000},
                            {"name": "铜仁市", "value": 3200000},
                            {"name": "黔西南布依族苗族自治州", "value": 3000000},
                            {"name": "黔东南苗族侗族自治州", "value": 3500000},
                            {"name": "黔南布依族苗族自治州", "value": 3100000},
                            {"name": "仁怀市", "value": 500000}
                        ]
                    },
                    {
                        "name": "山西省",
                        "children": [
                            {"name": "太原市", "value": 4400000},
                            {"name": "大同市", "value": 3400000},
                            {"name": "阳泉市", "value": 1300000},
                            {"name": "长治市", "value": 3300000},
                            {"name": "晋城市", "value": 2300000},
                            {"name": "朔州市", "value": 1700000},
                            {"name": "晋中市", "value": 3200000},
                            {"name": "运城市", "value": 5200000},
                            {"name": "忻州市", "value": 3100000},
                            {"name": "临汾市", "value": 4300000}
                        ]
                    },
                    {
                        "name": "台湾省",
                        "children": [
                            {"name": "台北市", "value": 2600000},
                            {"name": "新北市", "value": 3900000},
                            {"name": "桃园市", "value": 2000000},
                            {"name": "台中市", "value": 2700000},
                            {"name": "台南市", "value": 1800000},
                            {"name": "高雄市", "value": 2700000},
                            {"name": "基隆市", "value": 900000},
                            {"name": "新竹市", "value": 400000},
                            {"name": "嘉义市", "value": 600000},
                            {"name": "新竹县", "value": 500000}
                        ]
                    },
                    {
                        "name": "吉林省",
                        "children": [
                            {"name": "长春市", "value": 7500000},
                            {"name": "吉林市", "value": 4300000},
                            {"name": "四平市", "value": 3000000},
                            {"name": "辽源市", "value": 1100000},
                            {"name": "通化市", "value": 2100000},
                            {"name": "白山市", "value": 1200000},
                            {"name": "松原市", "value": 2800000},
                            {"name": "白城市", "value": 1800000},
                            {"name": "延边朝鲜族自治州", "value": 2100000}
                        ]
                    },
                    {
                        "name": "黑龙江省",
                        "children": [
                            {"name": "哈尔滨市", "value": 9500000},
                            {"name": "齐齐哈尔市", "value": 5300000},
                            {"name": "鸡西市", "value": 1700000},
                            {"name": "鹤岗市", "value": 1000000},
                            {"name": "双鸭山市", "value": 1400000},
                            {"name": "大庆市", "value": 2800000},
                            {"name": "伊春市", "value": 1100000},
                            {"name": "佳木斯市", "value": 2400000},
                            {"name": "七台河市", "value": 900000},
                            {"name": "牡丹江市", "value": 2500000}
                        ]
                    },
                    {
                        "name": "江西省",
                        "children": [
                            {"name": "南昌市", "value": 5200000},
                            {"name": "景德镇市", "value": 1600000},
                            {"name": "萍乡市", "value": 1800000},
                            {"name": "九江市", "value": 4600000},
                            {"name": "新余市", "value": 1100000},
                            {"name": "鹰潭市", "value": 1000000},
                            {"name": "赣州市", "value": 8300000},
                            {"name": "吉安市", "value": 4900000},
                            {"name": "宜春市", "value": 5800000},
                            {"name": "抚州市", "value": 3900000}
                        ]
                    },
                    {
                        "name": "安徽省",
                        "children": [
                            {"name": "合肥市", "value": 8000000},
                            {"name": "芜湖市", "value": 3500000},
                            {"name": "蚌埠市", "value": 3300000},
                            {"name": "淮南市", "value": 3400000},
                            {"name": "马鞍山市", "value": 2300000},
                            {"name": "淮北市", "value": 2100000},
                            {"name": "铜陵市", "value": 1600000},
                            {"name": "安庆市", "value": 5300000},
                            {"name": "黄山市", "value": 1400000},
                            {"name": "滁州市", "value": 4000000}
                        ]
                    },
                    {
                        "name": "海南省",
                        "children": [
                            {"name": "海口市", "value": 2200000},
                            {"name": "三亚市", "value": 700000},
                            {"name": "三沙市", "value": 1000},
                            {"name": "儋州市", "value": 900000},
                            {"name": "五指山市", "value": 100000},
                            {"name": "琼海市", "value": 500000},
                            {"name": "文昌市", "value": 500000},
                            {"name": "万宁市", "value": 600000},
                            {"name": "东方市", "value": 400000},
                            {"name": "定安县", "value": 300000}
                        ]
                    },
                    {
                        "name": "青海省",
                        "children": [
                            {"name": "西宁市", "value": 2300000},
                            {"name": "海东市", "value": 1800000},
                            {"name": "海北藏族自治州", "value": 300000},
                            {"name": "黄南藏族自治州", "value": 280000},
                            {"name": "海南藏族自治州", "value": 450000},
                            {"name": "果洛藏族自治州", "value": 200000},
                            {"name": "玉树藏族自治州", "value": 400000},
                            {"name": "海西蒙古族藏族自治州", "value": 500000}
                        ]
                    },
                    {
                        "name": "内蒙古自治区",
                        "children": [
                            {"name": "呼和浩特市", "value": 3100000},
                            {"name": "包头市", "value": 2800000},
                            {"name": "乌海市", "value": 600000},
                            {"name": "赤峰市", "value": 4400000},
                            {"name": "通辽市", "value": 3100000},
                            {"name": "鄂尔多斯市", "value": 2100000},
                            {"name": "呼伦贝尔市", "value": 2700000},
                            {"name": "巴彦淖尔市", "value": 1800000},
                            {"name": "乌兰察布市", "value": 2000000},
                            {"name": "兴安盟", "value": 1600000}
                        ]
                    },
                    {
                        "name": "新疆维吾尔自治区",
                        "children": [
                            {"name": "乌鲁木齐市", "value": 3500000},
                            {"name": "克拉玛依市", "value": 500000},
                            {"name": "吐鲁番市", "value": 600000},
                            {"name": "哈密市", "value": 200000},
                            {"name": "昌吉回族自治州", "value": 1800000},
                            {"name": "博尔塔拉蒙古自治州", "value": 400000},
                            {"name": "巴音郭楞蒙古自治州", "value": 1200000},
                            {"name": "阿克苏地区", "value": 2500000},
                            {"name": "克孜勒苏柯尔克孜自治州", "value": 600000},
                            {"name": "喀什地区", "value": 4400000}
                        ]
                    },
                    {
                        "name": "西藏自治区",
                        "children": [
                            {"name": "拉萨市", "value": 900000},
                            {"name": "昌都市", "value": 700000},
                            {"name": "山南市", "value": 350000},
                            {"name": "日喀则市", "value": 800000},
                            {"name": "那曲市", "value": 300000},
                            {"name": "阿里地区", "value": 100000},
                            {"name": "林芝市", "value": 200000}
                        ]
                    },
                    {
                        "name": "宁夏回族自治区",
                        "children": [
                            {"name": "银川市", "value": 2100000},
                            {"name": "石嘴山市", "value": 800000},
                            {"name": "吴忠市", "value": 1300000},
                            {"name": "固原市", "value": 600000},
                            {"name": "中卫市", "value": 1200000}
                        ]
                    }
                ]
            }
        ];

        myChart2.hideLoading();
        const formatUtil = echarts.format;

        function getLevelOption() {
            return [
                {
                    itemStyle: {
                        borderWidth: 0,
                        gapWidth: 5
                    }
                },
                {
                    itemStyle: {
                        gapWidth: 1
                    }
                },
                {
                    colorSaturation: [0.35, 0.5],
                    itemStyle: {
                        gapWidth: 1,
                        borderColorSaturation: 0.6
                    }
                }
            ];
        }

        // 为每个省份数据添加颜色
        const provinceColors = ['#c23531', '#2f4554', '#61a0a8', '#d48265', '#91c7ae', '#749f83', '#ca8622', '#bda29a', '#6e7074', '#546570', '#c4ccd3'];
        let colorIndex = 0;

        // 为每个省份及其子城市设置颜色
        function setColorToProvince(provinceData) {
            const color = provinceColors[colorIndex % provinceColors.length];
            provinceData.itemStyle = {
                color: color
            };
            colorIndex++;

            if (provinceData.children) {
                provinceData.children.forEach(function (city) {
                    city.itemStyle = {
                        color: color
                    };
                    if (city.children) {
                        setColorToProvince(city); // 递归设置颜色
                    }
                });
            }
        }

        // 应用颜色到所有省份
        diskData.forEach(function (province) {
            setColorToProvince(province);
        });

        myChart2.setOption({
            series: [
                {
                    type: 'treemap',
                    visibleMin: 350,
                    label: {
                        show: true,
                        formatter: '{b}'
                    },
                    itemStyle: {
                        borderColor: '#fff'
                    },
                    levels: getLevelOption(),
                    drillDownIcon: '▶', // 显示向下的箭头图标
                    nodeClick: 'zoomToNode', // 点击节点时，放大查看子节点
                    draggable: true, // 禁止拖动
                    data: diskData
                }
            ],
            tooltip: {
                formatter: function (info) {
                    let value = info.value;
                    let treePathInfo = info.treePathInfo;
                    let treePath = [];
                    for (let i = 1; i < treePathInfo.length; i++) {
                        treePath.push(treePathInfo[i].name);
                    }
                    return [
                        '<div class="tooltip-title">',
                        formatUtil.encodeHTML(treePath.join('/')),
                        '</div>',
                        'Value: ' + formatUtil.addCommas(value)
                    ].join('');
                }
            }
        });
    }


</script>
</body>
</html>